<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>积分兑换商城</title>
    <link rel="stylesheet" type="text/css" href="/mall/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="/mall/css/detail.css"/>
    <link rel="stylesheet" type="text/css" href="/mall/css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/mall/css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="/mall/css/loading.css"/>
    <link rel="stylesheet" href="/mall/css/swiper.min.css">
    <script src="/mall/js/rem.js"></script>
    <script src="/mall/js/jquery.min.js" type="text/javascript"></script>
    <script src="/mall/js/others.js"></script>
    <script src="/mall/js/swiper.jquery.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>

    <script type="text/javascript">
        $(window).load(function () {
            $(".loading").addClass("loader-chanage")
            $(".loading").fadeOut(300)
        })

        function toshare() {
            $(".am-share").addClass("am-modal-active");
            if ($(".sharebg").length > 0) {
                $(".sharebg").addClass("sharebg-active");
            } else {
                $("body").append('<div class="sharebg"></div>');
                $(".sharebg").addClass("sharebg-active");
            }
            $(".sharebg-active,.share_btn").click(function () {
                $(".am-share").removeClass("am-modal-active");
                setTimeout(function () {
                    $(".sharebg-active").removeClass("sharebg-active");
                    $(".sharebg").remove();
                }, 300);
            })
        }

        $(function () {
            var user = JSON.parse(sessionStorage.getItem("user"));
            if(user){
            var params = getParams();
            if (params.id) {
                $.get("/products/" + params.id, function (data) {
                    $(".warp").renderValues(data,{
                        getSale:function (item,value) {
                            $(item).html("销量 "+(999-value));
                        }
                    });
                    $(".sdetail").renderValues(data);

                    $(".btnone").click(function () {
                        //如果是购买则给 确定按钮增加一个属性值
                        $("#sureBtn").attr("data-buy",1);
                        toshare();
                    })
                })
            }
            $("#sureBtn").click(function () {
                if($(this).data("buy")==1){
                    //如果是购买  将购买的数量使用路径传参
                    var num = $("#count").html();
                    location.href="/mine/store/order.html?id=" +params.id+"&num="+num;
                }else{
                    $.post("/products/" + params.id, {'user.id': user.id,number:$("#count").html()}, function (data) {
                        $(document).dialog({
                            content: '添加购物车成功',
                            autoClose: 1000,
                            onClosed: function () {
                                location.href = "/mine/store/shop.html";
                            }
                        });
                    })
                }
            });
        }else{
            window.location.href="/login.html";
        }
        })
    </script>
</head>
<!--loading页开始-->
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<!--loading页结束-->
<body>
<!--header star-->
<header class="mui-bar mui-bar-nav" id="header">
    <a class="btn" href="javascript:history.go(-1)">
        <i class="iconfont icon-fanhui"></i>
    </a>
    <h4>商品详情</h4>
</header>
<!--header end-->

<div class="warp warptwo clearfloat">
    <div class="detail clearfloat">
        <!--banner star-->
        <div class="banner swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="javascript:void(0)">
                        <img class="swiper-lazy" render-src="imgUrls" alt="">
                    </a>
                </div>
                <!--<div class="swiper-slide"><a href="javascript:void(0)"><img class="swiper-lazy" data
                                                                            src="images/xj3.jpg" alt=""></a></div>
                <div class="swiper-slide"><a href="javascript:void(0)"><img class="swiper-lazy" data
                                                                            src="images/xj3.jpg" alt=""></a></div>
                <div class="swiper-slide"><a href="javascript:void(0)"><img class="swiper-lazy" data
                                                                            src="images/xj3.jpg" alt=""></a></div>-->
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <!--banner end-->
        <div class="top clearfloat box-s">
            <div class="shang clearfloat">
                <div class="zuo clearfloat fl over2 box-s" render-html="info">
                </div>
                <div class="you clearfloat fr">
                    <i class="iconfont icon-fenxiang"></i>
                    <p>分享</p>
                </div>
            </div>
            <div class="xia clearfloat">
                <p class="jifen fl box-s"><samp render-html="integral"></samp>积分</p>
                <span class="fr" render-key="amount" render-fun="getSale"></span>
            </div>
        </div>
        <div class="middle clearfloat box-s">
            <a href="#">
                <span class="fl">商品详情</span>
                <i class="iconfont icon-jiantou1 fr"></i>
            </a>
        </div>
        <div class="middle clearfloat box-s">
            <a href="#">
                <span class="fl">商品评价</span>
                <i class="iconfont icon-jiantou1 fr"></i>
            </a>
        </div>
    </div>
</div>

<!--footerone star-->
<div class="footerone clearfloat">
    <div class="left clearfloat fl">
        <ul>
            <li style="display: flex;justify-content: center; align-items: center;padding-top: 0;">
                <div>
                    <a href="#">
                        <i class="iconfont icon-shangcheng"></i>
                        <p>商城</p>
                    </a>
                </div>
            </li>
            <li style="display: flex;justify-content: center; align-items: center;padding-top: 0;">
                <div>
                    <a href="#">
                        <i class="iconfont icon-kefu1"></i>
                        <p>客服</p>
                    </a>
                </div>
            </li>
        </ul>
    </div>
    <div class="right clearfloat fl">
        <span class="btn fl" onClick="toshare()">加入购物车</span>
        <a role="button" class="btn btnone fl" data-buy="1">立即购买</a>
    </div>
</div>
<!--footerone end-->

<!--弹出购物车内容-->
<div class="am-share">
    <div class="am-share-footer">
        <button class="share_btn"><img src="/mall/images/chahao.png"/></button>
    </div>
    <div class="am-share-sns box-s">
        <div class="sdetail clearfloat">
            <div class="top clearfloat">
                <div class="tu clearfloat fl">
                    <span></span>
                    <img render-src="imgUrls"/>
                </div>
                <div class="you clearfloat fl">
                    <p class="tit" render-html="info"></p>
                    <p class="jifen1 fl box-s"><samp render-html="integral"></samp>积分</p>
                </div>
            </div>
            <div class="middle clearfloat">
                <p>颜色分类</p>
                <div class="xia clearfloat">
                    <ul>
                        <li class="ra3 cur">库存</li>
                        <li class="ra3" render-html="amount"></li>
                    </ul>
                </div>
            </div>
            <div class="bottom clearfloat">
                <p class="fl">购买数量</p>
                <div class="you clearfloat fr">
                    <ul>
                        <li id="down"><img src="/mall/images/jian.jpg"/></li>
                        <li id="count">1</li>
                        <li onclick="document.getElementById('count').innerHTML++">
                            <img src="/mall/images/jia.jpg"/>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <a type="button" class="shop-btn db" id="sureBtn">确定</a>
</div>
<script type="text/javascript">
    var down = document.getElementById("down");
    var count = document.getElementById("count");
    window.onload = function () {
        down.onclick = function () {
            if (count.innerHTML > 1) {
                count.innerHTML--;
            } else {
                count.innerHTML = 1;
            }
        }
        /*$(".middle .xia li").click(function () {
            $(this).addClass('cur').siblings().removeClass('cur');
        });*/

    }
</script>
<!--footer star-->
<footer class="page-footer fixed-footer" id="footer">
    <ul>
        <li>
            <a href="shop.html">
                <i class="iconfont icon-shouye"></i>
                <p>首页</p>
            </a>
        </li>
        <li class="active">
            <a href="/mine/store/cation.html">
                <i class="iconfont icon-icon04"></i>
                <p>分类</p>
            </a>
        </li>
        <li>
            <a href="/mine/store/shopcar.html">
                <i class="iconfont icon-gouwuche"></i>
                <p>购物车</p>
            </a>
        </li>
        <li>
            <a href="/mine/store/center.html">
                <i class="iconfont icon-yonghuming"></i>
                <p>我的</p>
            </a>
        </li>
    </ul>
</footer>
<!--footer end-->
</body>

</html>